<template>
  <div class="mt-mask" 
  :class="{active: active}" 
  @click="handleClick"
  :style="styles"></div>
</template>

<script>
export default {
  data() {
    return {
      styles: ''
    }
  }, 
  props: {
    active: {
      default: false
    },
    transtionSpead: {
      default: 0.2
    },
    zIndex: {
      default: 9
    }
  },
  mounted() {
    this.styles = {'transition': `all ${this.transtionSpead}s`, zIndex: this.zIndex}
  },
  methods: {
    handleClick() {
      this.$emit("onClick")
    }
  }
}
</script>

<style lang="scss">
.mt-mask {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  transition: all 0.2s;

&.active {
    visibility: visible;
    opacity: 100;
    // transition: all 0.2s;
  }
}
</style>

